<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>放大镜-小懒猫</title>
		<meta name="keywords" content="关键字,关键字"/>
		<meta name="description" content="描述信息">
		<link rel="stylesheet" href="css/common.css" />
		<style type="text/css">
			body{
				background: #e5e5e5;
			}
			.warp_container{
				width: 840px;
				height: 540px;
				margin: 100px auto;
			}
			.imgbox{
				float: left;
				position: relative;
			}
			.maximgbox{
				width: 520px;
				height: 500px;
				margin-left: 320px;
			}
			.imgbox .cover{
				display: block;
				width: 80px;
				height: 80px;
				background: rgb(250 19 19 / 78%);
				position: absolute;
				top: 0px;
				left: 0px;
				opacity: 0.5;
				display: none;
				cursor: move;
			}
			.mark{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0px;
				left: 0px;
				background: transparent;
				cursor:move;
			}
		</style>
	</head>
	<body>
		<div class="warp_container u-c">
			<div class="imgbox u-e">
				<img src="images/00.jpg" width="300" height="300">
				<span class="cover"></span>
				<div class="mark"></div>
			</div>
			<div class="maximgbox u-f"></div>
		</div>
		<script type="text/javascript">
			function dom(id){
				return document.getElementById(id);
			}
			
			function log(msg){
				return console.log(msg);
			}
			
			window.onload = function(){
				//小图层对象
				var imgDom = document.querySelector(".imgbox");
				
				//阴隐层
				var coverDom = imgDom.children[1];
				
				//鼠标移入
				imgDom.onmouseover = function(){
					coverDom.style.display = "block";
				}
				//鼠标移出
				imgDom.onmouseout = function(){
					coverDom.style.display = "none";
				}
				//鼠标移动
				imgDom.onmousemove = function(e){
					//clientX pageX --当前鼠标的位置
					//offsetLeft和offsetTop是元素在浏览器的位置 理解一个人在某个教室里的作为，距离浏览器的顶部距离和左边的距离 
					//offsetWidth和offsetHeight是元素的宽度和高度，理解就是一个人高矮胖瘦.
					var x = e.clientX - this.offsetLeft;
					var y = e.clientY - this.offsetTop;
					
					//(0,0)
					var cleft = x-coverDom.offsetWidth/2
					var ctop = y-coverDom.offsetHeight/2
				
					
					//maxWith和maxHeight
					var maxLeft = this.offsetWidth - coverDom.offsetWidth;
					var maxTop = this.offsetHeight - coverDom.offsetHeight;
					if(cleft<0){
						cleft = 0;
					}
					
					if(cleft>maxLeft){
						cleft = maxLeft;
					}
					
					if(ctop<0){
						ctop = 0;
					}
					
					if(ctop>maxTop){
						ctop = maxTop;
					}
					
					coverDom.style.left = cleft + "px";
					coverDom.style.top =  ctop + "px";
				}
			}
		</script>
	</body>
</html>
